<template>
<div style="width: 100%;height: 100vh;background: darkslateblue;overflow: hidden">

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
  <div>
    <div class="container">
    <div>
          <div style="width: 400px ;margin: 100px auto;margin-top: 100px">
            <h1 style="text-align: center;color: #00c6fb">欢迎注册</h1><br><br>
            <el-form ref="form" :model="form" size="normal" :rules="rules" >
              <!--      prop中的名字和底下rules中的名字相对应-->
              <el-form-item prop="username" >
                <el-input v-model="form.username" placeholder="用户名" prefix-icon="el-icon-user"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="form.password" placeholder="密码" prefix-icon="el-icon-key" show-password ></el-input>
              </el-form-item>
              <el-form-item prop="password1">
                <el-input v-model="form.password1" placeholder="确认密码" prefix-icon="el-icon-key" show-password ></el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="form.nickName" placeholder="昵称" prefix-icon="el-icon-apple"  ></el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="form.age" placeholder="年龄" prefix-icon="el-icon-ship"  ></el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="form.sex" placeholder="性别" prefix-icon="el-icon-female"  ></el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="form.address" placeholder="地址" prefix-icon="el-icon-location" ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="login" style="width: 100%;">返回登录页面</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="register" style="width: 100%;">注册</el-button>
              </el-form-item>
            </el-form>

          </div>

        </div>
        <div style="text-align: center">
          <span>版权所有　© 郑博淋</span>

  </div>
  </div>


</div>
  </body>
  </html>

</div>
</template>

<script>
import request from "@/utils/request";


export default {
  name: "Login",
  data(){
    return{
      form :{

      },
      rules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
          },
        ],
        password1: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
          },
        ],
      }
    }
  },
  methods :{
    register(){
      if(this.form.password != this.form.password1){
        this.$message({
          type : 'error',
          message :'两次密码输入不一致'
        })
        return //控制不往下执行
      }
      this.$refs['form'].validate((valid) => {
        if (valid) {
          request.post('/api/user/register',this.form).then(res=>{
            if(res.code=='0'){
              this.$message({
                type : 'success',
                message :'注册成功'

              })
              this.$router.push('/login')
            }
            else {
              this.$message({
                type : 'error',
                message :res.msg
              })
            }
          })
        }
        else {
          this.$message({
            type : 'error',
            message :'用户名密码为空'

          })
        }
      })

    },
    login(){
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>

</style>